<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"><!--<![endif]--><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>LESS « 一种动态样式语言</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="keywords" content="Lesscss,CSS">
    <meta name="author" content="Bootstrap中文网">
    <meta name="robots" content="index,follow">
    <meta name="application-name" content="bootcss.com">

     <!--[if lt IE 7]><script>window.location.href = "/ie.html"; </script><![endif]-->
	<!--
    <link rel="stylesheet/less" type="text/css" href="http://www.bootcss.com/assets/less/main.less">
	-->
	<style id="less:assets-less-main" type="text/css">html {
  margin: 0;
}
body {
  background-color: #262626;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  font-size: 100%;
  overflow-x: hidden;
}
nav,
header,
footer,
section,
article {
  display: block;
}
a {
  color: #b83000;
}
h1 a {
  color: black;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: normal;
}
ul,
li {
  list-style-type: none;
}
code {
  font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace !important;
}
code .string,
code .regexp {
  color: #3d575c;
}
code .keyword {
  font-weight: bold;
}
code .comment {
  color: rgba(0, 0, 0, 0.5);
}
code .number {
  color: #143352;
}
code .class,
code .special {
  color: rgba(0, 50, 100, 0.8);
}
pre {
  padding: 0 30px;
  text-wrap: wrap;
  white-space: pre-wrap;
  /* css-3 */

  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */

  white-space: -pre-wrap;
  /* Opera 4-6 */

  white-space: -o-pre-wrap;
  /* Opera 7 */

  word-wrap: break-word;
  /* Internet Explorer 5.5+ */

}
blockquote {
  font-style: italic;
}
body > footer {
  text-align: left;
  margin-left: 10px;
  font-style: italic;
  font-size: 18px;
  color: #888;
}
#logo {
  margin-top: 30px;
  margin-bottom: 30px;
  display: block;
  width: 199px;
  height: 81px;
  background: url(/assets/img/lesscss/logo.png) no-repeat;
}
nav {
  margin-left: 15px;
}
nav a,
#dropdown li {
  display: inline-block;
  color: white;
  line-height: 42px;
  margin: 0;
  padding: 0px 15px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  border: 2px solid transparent;
  border-width: 0 2px;
}
nav a:hover,
#dropdown li:hover {
  border: 2px solid #140805;
  border-left-color: #3d170f;
  border-right-color: #3d170f;
  border-bottom: 0;
  border-top: 0;
  background-color: #521f14;
  text-decoration: none;
}
.dark-red {
  border: 2px solid #140805;
  border-left-color: #3d170f;
  border-right-color: #3d170f;
  border-bottom: 0;
  border-top: 0;
  background-color: #521f14;
}
.content {
  margin: 0 auto;
  width: 980px;
}
#menu {
  position: absolute;
  width: 100%;
  z-index: 3;
  clear: both;
  display: block;
  background-color: #143352;
  height: 42px;
  border-top: 2px solid rgba(92, 153, 214, 0.5);
  border-bottom: 2px solid rgba(15, 38, 61, 0.5);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 0 0 #000;
}
#menu.docked {
  background-color: rgba(41, 102, 163, 0.4);
}
#menu:hover {
  background-color: #143352;
}
#menu #dropdown {
  margin: 0 0 0 247px;
  padding: 0;
  padding-top: 5px;
  display: none;
  width: 190px;
  border-top: 2px solid #7a2e1f;
  color: #eaf2d9;
  border: 2px solid #140805;
  border-left-color: #3d170f;
  border-right-color: #3d170f;
  border-top-width: 0;
  background-color: #521f14;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  -moz-border-top-right-radius: 0;
  -moz-border-top-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 6px 8px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 6px 8px rgba(0, 0, 0, 0.5);
}
#menu #dropdown ul {
  padding: 0px;
}
#menu #dropdown li {
  font-size: 14px;
  display: block;
  text-align: left;
  padding: 0;
  border: 0;
}
#menu #dropdown li a {
  display: block;
  padding: 0px 15px;
  text-decoration: none;
  color: white;
}
#menu #dropdown li a:hover {
  background-color: #3d170f;
  text-decoration: none;
}
#main {
  margin: 0 auto;
  width: 100%;
  background-color: #79c3d2;
  border-top: 8px solid #66bbcc;
}
#main #intro {
  background-color: #d9eef2;
  float: left;
  margin-top: -8px;
  margin-right: 5px;
  height: 380px;
  position: relative;
  z-index: 2;
  font-family: 'Droid Serif', 'Georgia';
  width: 395px;
  padding: 45px 20px 23px 30px;
  border: 2px dashed #53b2c6;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.5);
  border-bottom: 0;
  border-top: 0;
}
#main #intro #download {
  color: transparent;
  border: 0;
  float: left;
  display: inline-block;
  margin: 15px 0 15px -5px;
}
#main #intro #download img {
  display: inline-block;
}
#main #intro #download-info {
  color: #476685;
  display: inline;
  float: left;
  margin: 36px 0 0 15px;
}
#main #intro #download-info code {
  font-size: 13px;
}
#main h2 {
  color: #143352;
  margin: 20px 0;
  font-size: 24px;
  line-height: 1.2em;
}
#main h2 span {
  color: #7a2e1f;
}
#main h3 {
  color: #143352;
  line-height: 1.4em;
  margin: 30px 0 15px 0;
  font-size: 1em;
  text-shadow: 0px 0px 0px #e6ebe0;
}
#main h3 span {
  color: #7a2e1f;
}
#main #example {
  float: right;
  font-size: 12px;
  margin: 0;
  margin-top: 15px;
  padding: 0;
  width: 500px;
}
#main #example p {
  font-size: 18px;
  color: #143352;
  font-weight: bold;
  text-shadow: 0px 1px 1px #e6ebe0;
}
#main #example pre {
  margin: 0;
  text-shadow: 0 -1px 1px #262626;
  margin-top: 20px;
  background-color: #262626;
  border: 0;
  width: 450px;
  color: #ebefe7;
  background-repeat: repeat;
  padding: 15px;
  border: 1px dashed #e6ebe0;
  line-height: 15px;
  box-shadow: 0 0px 15px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0px 15px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0px 15px rgba(0, 0, 0, 0.5);
  font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace !important;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}
#main #example pre code .attribute {
  color: #d9bf8c;
}
#main #example pre code .variable {
  color: #738c73;
}
#main #example pre code .element {
  color: #669991;
}
#main #example pre code .string,
#main #example pre .regexp {
  color: #bcd279;
}
#main #example pre code .class {
  color: #c2a770;
  font-weight: normal;
}
#main #example pre code .id {
  color: #c2b470;
  font-weight: normal;
}
#main #example pre code .comment {
  color: rgba(255, 255, 255, 0.2);
}
#main #example pre code .number,
#main #example pre .color {
  color: #b35e4d;
}
#main #example pre code .class,
#main #example pre code .mixin,
#main #example pre .special {
  color: #669199;
}
#main #example pre #time {
  color: #aaaaaa;
}
.page {
  margin: 0 auto;
  font-family: 'Georgia', serif;
  font-size: 18px;
  line-height: 26px;
  padding: 0 60px;
}
.page .content {
  width: 870px;
  padding: 45px;
}
.page code {
  font-size: 16px;
}
.page pre {
  border-width: 1px;
  border-style: dashed;
  padding: 15px;
  margin: 15px 0;
}
.page h1 {
  text-align: left;
  font-size: 40px;
  margin-top: 15px;
  margin-bottom: 35px;
}
.page p + h1 {
  margin-top: 60px;
}
.page h2,
.page h3 {
  margin: 30px 0 15px 0;
}
.page p + h2,
.page pre + h2,
.page code + h2 {
  border-top: 6px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
}
.page h3 {
  margin: 15px 0;
}
#docs {
  border-top: 2px solid #9fd5df;
  color: #143352;
  background-color: #79c3d2;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}
#docs h1 {
  font-family: 'Droid Serif', 'Georgia', serif;
  padding-top: 30px;
  padding-left: 45px;
  font-size: 44px;
  text-align: left;
  margin: 30px 0 !important;
  text-shadow: 0px 1px 1px #e6ebe0;
  font-weight: bold;
}
#docs .content {
  clear: both;
  border-color: transparent;
  background-color: #d9eef2;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
}
#docs pre {
  color: #1f4c7a;
  background-color: #ffffff;
  border-color: #d9eef2;
  border-width: 2px;
}
#docs pre code .attribute {
  color: #735926;
}
#docs pre code .variable {
  color: #455445;
}
#docs pre code .element {
  color: #3d5c57;
}
#docs pre code .string,
#docs pre .regexp {
  color: #70862d;
}
#docs pre code .class {
  color: #6b572e;
  font-weight: normal;
}
#docs pre code .id {
  color: #6b612e;
  font-weight: normal;
}
#docs pre code .comment {
  color: rgba(0, 0, 0, 0.4);
}
#docs pre code .number,
#docs pre .color {
  color: #6b382e;
}
#docs pre code .class,
#docs pre code .mixin,
#docs pre .special {
  color: #3d575c;
}
#docs pre code {
  font-size: 15px;
}
#docs p + h2,
#docs pre + h2,
#docs code + h2 {
  border-top-color: rgba(0, 0, 0, 0.1);
}
td {
  padding-right: 30px;
}
#synopsis {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
#synopsis h2,
#about h2,
#translations h2 {
  font-size: 30px;
  padding: 10px 0;
}
#synopsis h1 + h2,
#about h1 + h2,
#translations h1 + h2 {
  margin-top: 15px;
}
#synopsis h3,
#about h3,
#translations h3 {
  font-size: 22px;
}
#synopsis .code-example,
#about .code-example,
#translations .code-example {
  border-spacing: 0;
  border-width: 1px;
  border-style: dashed;
  padding: 0;
}
#synopsis .code-example pre,
#about .code-example pre,
#translations .code-example pre {
  border: 0;
  margin: 0;
}
#synopsis .code-example td,
#about .code-example td,
#translations .code-example td {
  border: 0;
  margin: 0;
  background-color: #191919;
  vertical-align: top;
  padding: 0;
}
#synopsis .code-example tr,
#about .code-example tr,
#translations .code-example tr {
  padding: 0;
}
#synopsis .css-output td,
#about .css-output td,
#translations .css-output td {
  border-left: 0;
}
#synopsis .css-output,
#about .css-output,
#translations .css-output,
#synopsis .less-example,
#about .less-example,
#translations .less-example {
  width: 390px;
}
#synopsis pre,
#about pre,
#translations pre {
  padding: 20px;
  line-height: 20px;
  font-size: 14px;
}
#about,
#synopsis,
#guide,
#translations {
  text-shadow: 0 -1px 1px #262626;
  color: #eaf2d9;
  background-color: #191919;
}
#about a,
#synopsis a,
#guide a,
#translations a {
  text-decoration: none;
  color: #fbfbcb;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}
#about a:hover,
#synopsis a:hover,
#guide a:hover,
#translations a:hover {
  text-decoration: none;
  border-bottom: 1px dashed #fbfbcb;
}
#about .content,
#synopsis .content,
#guide .content,
#translations .content {
  background-color: #262626;
  clear: both;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
}
#about h1,
#synopsis h1,
#guide h1,
#translations h1,
#about h2,
#synopsis h2,
#guide h2,
#translations h2,
#about h3,
#synopsis h3,
#guide h3,
#translations h3 {
  color: #e2e2b1;
}
#about pre,
#synopsis pre,
#guide pre,
#translations pre {
  background-color: #191919;
  border-color: #f9f9b3;
}
#about pre code .attribute,
#synopsis pre code .attribute,
#guide pre code .attribute,
#translations pre code .attribute {
  color: #d9bf8c;
}
#about pre code .variable,
#synopsis pre code .variable,
#guide pre code .variable,
#translations pre code .variable {
  color: #738c73;
}
#about pre code .element,
#synopsis pre code .element,
#guide pre code .element,
#translations pre code .element {
  color: #669991;
}
#about pre code .string,
#synopsis pre code .string,
#guide pre code .string,
#translations pre code .string,
#about pre .regexp,
#synopsis pre .regexp,
#guide pre .regexp,
#translations pre .regexp {
  color: #bcd279;
}
#about pre code .class,
#synopsis pre code .class,
#guide pre code .class,
#translations pre code .class {
  color: #c2a770;
  font-weight: normal;
}
#about pre code .id,
#synopsis pre code .id,
#guide pre code .id,
#translations pre code .id {
  color: #c2b470;
  font-weight: normal;
}
#about pre code .comment,
#synopsis pre code .comment,
#guide pre code .comment,
#translations pre code .comment {
  color: rgba(255, 255, 255, 0.2);
}
#about pre code .number,
#synopsis pre code .number,
#guide pre code .number,
#translations pre code .number,
#about pre .color,
#synopsis pre .color,
#guide pre .color,
#translations pre .color {
  color: #b35e4d;
}
#about pre code .class,
#synopsis pre code .class,
#guide pre code .class,
#translations pre code .class,
#about pre code .mixin,
#synopsis pre code .mixin,
#guide pre code .mixin,
#translations pre code .mixin,
#about pre .special,
#synopsis pre .special,
#guide pre .special,
#translations pre .special {
  color: #669199;
}
#about code,
#synopsis code,
#guide code,
#translations code {
  color: #dcdc9e;
}
#about code .string,
#synopsis code .string,
#guide code .string,
#translations code .string,
#about code .regexp,
#synopsis code .regexp,
#guide code .regexp,
#translations code .regexp {
  color: #87bbc5;
}
#about code .keyword,
#synopsis code .keyword,
#guide code .keyword,
#translations code .keyword {
  color: #c2a770;
  font-weight: normal;
}
#about code .comment,
#synopsis code .comment,
#guide code .comment,
#translations code .comment {
  color: rgba(255, 255, 255, 0.2);
}
#about code .number,
#synopsis code .number,
#guide code .number,
#translations code .number {
  color: #1f4c7a;
}
#about code .class,
#synopsis code .class,
#guide code .class,
#translations code .class,
#about code .special,
#synopsis code .special,
#guide code .special,
#translations code .special {
  color: #669199;
}
#guide {
  background-color: #262626;
}
#guide .content {
  background-color: transparent;
}
#about {
  background-color: #262626 !important;
}
#about .content {
  background-color: #2e2e2e;
}
#translations {
  background-color: #262626 !important;
}
#translations .content {
  background-color: #2e2e2e;
}
#synopsis {
  background-color: #2e2e2e !important;
}
#synopsis .content {
  background-color: #2e2e2e;
}
#synopsis .content,
#guide .content {
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
}
#about footer {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 6px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.35);
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02);
}
#about footer #copy {
  font-size: 12px;
}
</style>
    <script src="docfiles/less.js" type="text/javascript"></script>
    <link href="docfiles/css.css" rel="stylesheet" type="text/css">

    <link rel="shortcut icon" href="http://www.bootcss.com/assets/img/lesscss/favicon.ico">
    
    <script type="text/javascript">
      (function () {
      	//作者不希望用ie访问该站点
        if (/Microsoft/.test(navigator.appName)) { return }

        window.onload = function () {
          var headers = document.querySelectorAll('#docs h2, #guide h1');
          var menu = document.getElementById('menu');
          var init = menu.offsetTop;
          var docked;

          /*for (var i = 0; i < headers.length; i++) {
            headers[i].id = '-' + headers[i].innerHTML.toLowerCase().replace(/ /g, '-');
          }*/

          window.onscroll = function () {
            if (!docked && (menu.offsetTop - scrollTop() < 0)) {
              menu.style.top = 0;
              menu.style.position = 'fixed';
              menu.className = 'docked';
              docked = true;
            } else if (docked && scrollTop() <= init) {
              menu.style.position = 'absolute';
              menu.style.top = init + 'px';
              menu.className = menu.className.replace('docked', '');
              docked = false;
            }
          };


          (function () {
            var link     = document.getElementById('guide-link'),
                menu     = document.getElementById('menu'),
                dropdown = document.getElementById('dropdown');

            link.onmouseover = function () {
              link.className = 'dark-red';
              dropdown.style.display = 'block';
            };
            link.onmouseout = function (e) {
              if (e.relatedTarget === dropdown) { return }
              link.className = link.className.replace('dark-red', '');
              hide ();
            };
            dropdown.onmouseout = function (e) {
              var t = e.relatedTarget;

              if (e.target == link) { return }

              while (t !== document.body) {
                if (t == dropdown) { return }
                else               { t = t.parentNode }
              } 
              link.className = link.className.replace('dark-red', '');
              hide ();
            };

            function hide() { dropdown.style.display = 'none' }
          })();
        };

        function scrollTop() {
          return document.body.scrollTop || document.documentElement.scrollTop;
        }
      })();
    </script>
  </head>
  <body>
    <section>
      <header id="main">
  <div class="content">
    <section id="intro">
      <div id="logo"></div>
      <h2>一种 <span>动态</span> 样式 <span>语言</span>.</h2>
      <h3>
        LESS 将 CSS 赋予了动态语言的特性，如 <span>变量</span>， <span>继承</span>，
        <span>运算</span>， <span>函数</span>. LESS 既可以在 <span>客户端</span> 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助<span>Node.js</span>或者<span>Rhino</span>在服务端运行。
      </h3>
      <a id="download" href="http://cloud.github.com/downloads/cloudhead/less.js/less-1.3.1.min.js">
        <img src="docfiles/download-button.png"></a><div id="download-info">version <code><span class="number">1.3</span><span class="number">.1</span></code></div>
    </section>

    <section id="example">
    <p>LESS可以这样来写CSS:</p>

<pre><code>
<span class="variable">@base</span>: <span class="color">#f938ab</span>;

<span class="class">.box-shadow</span>(<span class="variable">@style</span>, <span class="variable">@c</span>) <span class="keyword">when</span> (iscolor(<span class="variable">@c</span>)) {
  <span class="attribute">box-shadow</span>:         <span class="variable">@style </span><span class="variable">@c</span>;
  <span class="attribute">-webkit-box-shadow</span>: <span class="variable">@style </span><span class="variable">@c</span>;
  <span class="attribute">-moz-box-shadow</span>:    <span class="variable">@style </span><span class="variable">@c</span>;
}
<span class="class">.box-shadow</span>(<span class="variable">@style</span>, <span class="variable">@alpha</span>: <span class="number">50%</span>) <span class="keyword">when</span> (isnumber(<span class="variable">@alpha</span>)) {
  <span class="mixin">.box-shadow</span>(<span class="variable">@style</span>, rgba(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="variable">@alpha</span>));
}
<span class="class">.box</span> { 
  <span class="attribute">color</span>: saturate(<span class="variable">@base</span>, <span class="number">5%</span>);
  <span class="attribute">border-color</span>: lighten(<span class="variable">@base</span>, <span class="number">30%</span>);
  <span class="element">div</span> { <span class="mixin">.box-shadow</span>(<span class="number">0</span> <span class="number">0</span> <span class="number">5px</span>, <span class="number">30%</span>) }
}
</code></pre>

<p>在引入<code>less.js</code>前先要把你的样式文件引入 :</p>

<pre><code>&lt;link rel=<span class="string">"stylesheet/less"</span> type=<span class="string">"text/css"</span> href=<span class="string">"styles.less"</span>&gt;
&lt;script src=<span class="string">"less.js"</span> type=<span class="string">"text/javascript"</span>&gt;&lt;/script&gt;
</code></pre>

    </section>
  </div>
  <div style="clear: both"></div>
</header>

<section class="" style="top: 478px; position: absolute;" id="menu">
  <div class="content">
    <nav>
      <a href="http://www.bootcss.com/">Bootstrap中文网</a> |
      <a href="#synopsis">了解</a>
      <a href="#guide">使用</a>
      <a href="#docs" id="guide-link">语法</a>
      <a href="http://github.com/cloudhead/less.js">源码</a>
      <a href="#about">关于</a>
    </nav>
    <div id="dropdown">
      <ul>
        <li><a href="#-variables">变量</a></li>
        <li><a href="#-mixins">混合</a></li>
        <li><a href="#-parametric-mixins">带参数混合</a></li>
        <li><a href="#-nested-rules">嵌套规则</a></li>
        <li><a href="#-operations">运算</a></li>
        <li><a href="#-color-functions">Color 函数</a></li>
        <li><a href="#-namespaces">命名空间</a></li>
        <li><a href="#-scope">作用域</a></li>
        <li><a href="#-comments">注释</a></li>
        <li><a href="#-importing">Importing</a></li>
      </ul>
    </div>
  </div>
</section>

<section id="synopsis" class="page">
  <div class="content">
    <h2>变量</h2>

<p>变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。</p>

<table class="code-example" cellpadding="0">
  <tbody><tr><td>
  <pre class="less-example">  <code><span class="comment">// LESS</span>

<span class="variable">@color</span>: <span class="color">#4D926F</span>;

<span class="id">#header</span> {
  <span class="attribute">color</span>: <span class="variable">@color</span>;
}
<span class="element">h2</span> {
  <span class="attribute">color</span>: <span class="variable">@color</span>;
}</code></pre>
  </td><td>
  <pre class="css-output"><code><span class="comment">/* 生成的 CSS */</span>

<span class="id">#header</span> {
  <span class="attribute">color</span>: <span class="color">#4D926F</span>;
}
<span class="element">h2</span> {
  <span class="attribute">color</span>: <span class="color">#4D926F</span>;
}</code></pre></td>
  </tr>
</tbody></table>


<h2>混合</h2>

<p>混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。</p>

<table class="code-example" cellpadding="0">
  <tbody><tr><td>
  <pre class="less-example"><code><span class="comment">// LESS</span>

<span class="class">.rounded-corners</span> (<span class="variable">@radius</span>: <span class="number">5px</span>) {
  <span class="attribute">border-radius</span>: <span class="variable">@radius</span>;
  <span class="attribute">-webkit-border-radius</span>: <span class="variable">@radius</span>;
  <span class="attribute">-moz-border-radius</span>: <span class="variable">@radius</span>;
}

<span class="id">#header</span> {
  <span class="mixin">.rounded-corners</span>;
}
<span class="id">#footer</span> {
  <span class="mixin">.rounded-corners</span>(<span class="number">10px</span>);
}</code></pre></td>

<td>
  <pre class="css-output"><code><span class="comment">/* 生成的 CSS */</span>

<span class="id">#header</span> {
  <span class="attribute">border-radius</span>: <span class="number">5px</span>;
  <span class="attribute">-webkit-border-radius</span>: <span class="number">5px</span>;
  <span class="attribute">-moz-border-radius</span>: <span class="number">5px</span>;
}
<span class="id">#footer</span> {
  <span class="attribute">border-radius</span>: <span class="number">10px</span>;
  <span class="attribute">-webkit-border-radius</span>: <span class="number">10px</span>;
  <span class="attribute">-moz-border-radius</span>: <span class="number">10px</span>;
}</code></pre>
  </td></tr>
</tbody></table>


<h2>嵌套规则</h2>

<p>我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。</p>

<table class="code-example" cellpadding="0">
  <tbody><tr><td>
  <pre class="less-example"><code><span class="comment">// LESS</span>

<span class="id">#header</span> {
  <span class="element">h1</span> {
    <span class="attribute">font-size</span>: <span class="number">26px</span>;
    <span class="attribute">font-weight</span>: bold;
  }
  <span class="element">p</span> { <span class="attribute">font-size</span>: <span class="number">12px</span>;
    <span class="element">a</span> { <span class="attribute">text-decoration</span>: none;
      &amp;<span class="class">:hover</span> { <span class="attribute">border-width</span>: <span class="number">1px</span> }
    }
  }
}

</code></pre></td>

<td>
  <pre class="css-output"><code><span class="comment">/* 生成的 CSS */</span>

<span class="id">#header</span> <span class="element">h1</span> {
  <span class="attribute">font-size</span>: <span class="number">26px</span>;
  <span class="attribute">font-weight</span>: bold;
}
<span class="id">#header</span> <span class="element">p</span> {
  <span class="attribute">font-size</span>: <span class="number">12px</span>;
}
<span class="id">#header</span> <span class="element">p</span> <span class="element">a</span> {
  <span class="attribute">text-decoration</span>: none;
}
<span class="id">#header</span> <span class="element">p</span> <span class="element">a</span><span class="class">:hover</span> {
  <span class="attribute">border-width</span>: <span class="number">1px</span>;
}

</code></pre>
  </td></tr>
</tbody></table>


<h2>函数 &amp; 运算</h2>

<p>运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。</p>

<table class="code-example" cellpadding="0">
  <tbody><tr><td>
  <pre class="less-example"><code><span class="comment">// LESS</span>

<span class="variable">@the-border</span>: <span class="number">1px</span>;
<span class="variable">@base-color</span>: <span class="color">#111</span>;
<span class="variable">@red</span>:        <span class="color">#842210</span>;

<span class="id">#header</span> {
  <span class="attribute">color</span>: <span class="variable">@base-color </span>* <span class="number">3</span>;
  <span class="attribute">border-left</span>: <span class="variable">@the-border</span>;
  <span class="attribute">border-right</span>: <span class="variable">@the-border </span>* <span class="number">2</span>;
}
<span class="id">#footer</span> { 
  <span class="attribute">color</span>: <span class="variable">@base-color </span>+ <span class="color">#003300</span>;
  <span class="attribute">border-color</span>: desaturate(<span class="variable">@red</span>, <span class="number">10%</span>);
}

</code></pre></td>

<td>
  <pre class="css-output"><code><span class="comment">/* 生成的 CSS */</span>

<span class="id">#header</span> {
  <span class="attribute">color</span>: <span class="color">#333</span>;
  <span class="attribute">border-left</span>: <span class="number">1px</span>;
  <span class="attribute">border-right</span>: <span class="number">2px</span>;
}
<span class="id">#footer</span> { 
  <span class="attribute">color</span>: <span class="color">#114411</span>;
  <span class="attribute">border-color</span>: <span class="color">#7d2717</span>;
}

</code></pre>
  </td></tr>
</tbody></table>


  </div>
</section>

<section id="guide" class="page">
  <div class="content">
    <h1>在客户端使用</h1>

<p>引入你的 <code>.less</code> 样式文件的时候要设置 <code>rel</code> 属性值为 “<code>stylesheet/less</code>”:</p>

<pre><code>&lt;link rel=<span class="string">"stylesheet/less"</span> type=<span class="string">"text/css"</span> href=<span class="string">"styles.less"</span>&gt;
</code></pre>

<p>然后点击页面顶部download按钮下载 <code>less.js</code>, 在<code>&lt;head&gt;</code> 中引入:</p>

<pre><code>&lt;script src=<span class="string">"less.js"</span> type=<span class="string">"text/javascript"</span>&gt;&lt;/script&gt;
</code></pre>

<p>注意你的less样式文件一定要在引入less.js前先引入。</p>
<p>备注：请在服务器环境下使用！本地直接打开可能会报错！</p>

<h2>监视模式</h2>
<p>监视模式是客户端的一个功能，这个功能允许你当你改变样式的时候，客户端将自动刷新。</p>
<p>要使用它，只要在URL后面加上'<code>#!watch</code>'，然后刷新页面就可以了。另外，你也可以通过在终端运行<code>less.watch()</code>来启动监视模式。</p>

<h1>在服务器端使用</h1>

<h2>安装</h2>

<p>在服务器端安装 LESS 的最简单方式就是通过 <a href="http://github.com/isaacs/npm">npm</a>(node 的包管理器), 像这样:</p>

<pre><code>$ npm install less
</code></pre>

<p>如果你想下载最新稳定版本的 LESS，可以尝试像下面这样操作:</p>

<pre><code>$ npm install less@latest
</code></pre>

<h2>使用</h2>

<p>只要安装了 LESS，就可以在Node中像这样调用编译器:</p>

<pre><code>var less = require('less');

less.render('.class { width: 1 + 1 }', function (e, css) {
    console.log(css);
});
</code></pre>

<p>上面会输出</p>

<pre><code><span class="class">.class</span> {
  <span class="attribute">width</span>: <span class="number">2</span>;
}
</code></pre>

<p>你也可以手动调用解析器和编译器:</p>

<pre><code>var parser = new(less.Parser);

parser.parse('.class { width: 1 + 1 }', function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
});
</code></pre>

<h2>配置</h2>

<p>你可以向解析器传递参数:</p>

<pre><code>var parser = new(less.Parser)({
    paths: ['.', './lib'], // Specify search paths for @import directives
    filename: 'style.less' // Specify a filename, for better error messages
});

parser.parse('.class { width: 1 + 1 }', function (e, tree) {
    tree.toCSS({ compress: true }); // Minify CSS output
});
</code></pre>

<h2>在命令行下使用</h2>

<p>你可以在终端调用 LESS 解析器:</p>

<pre><code>$ lessc styles.less
</code></pre>

<p>上面的命令会将编译后的 CSS 传递给 <code>stdout</code>, 你可以将它保存到一个文件中:</p>

<pre><code>$ lessc styles.less &gt; styles.css
</code></pre>

<p>如何你想将编译后的 CSS 压缩掉，那么加一个 <code>-x</code> 参数就可以了.</p>

  </div>
</section>

<section id="docs" class="page">
  <h1> LESS 语法</h1>
  <div class="content">
      <p>LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情，果断学习之！</p>

<h2 id="-variables">变量</h2>

<p>很容易理解:</p>

<pre><code><span class="variable">@nice-blue</span>: <span class="color">#5B83AD</span>;
<span class="variable">@light-blue</span>: <span class="variable">@nice-blue </span>+ <span class="color">#111</span>;

<span class="id">#header</span> { <span class="attribute">color</span>: <span class="variable">@light-blue</span>; }
</code></pre>

<p>输出:</p>

<pre><code><span class="id">#header</span> { <span class="attribute">color</span>: <span class="color">#6c94be</span>; }
</code></pre>

<p>甚至可以用变量名定义为变量:</p>

<pre><code><span class="variable">@fnord</span>: <span class="string">"I am fnord."</span>;
<span class="variable">@var</span>: <span class="string">'fnord'</span>;
<span class="attribute">content</span>: <span class="variable">@@var</span>;
</code></pre>

<p>解析后:</p>

<pre><code><span class="attribute">content</span>: <span class="string">"I am fnord."</span>;
</code></pre>

<p>请注意 LESS 中的变量为完全的 ‘常量’ ，所以只能定义一次.</p>

<h2 id="-mixins">混合</h2>

<p>在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性. 下面有这样一个class:</p>

<pre><code><span class="class">.bordered</span> {
  <span class="attribute">border-top</span>: dotted <span class="number">1px</span> black;
  <span class="attribute">border-bottom</span>: solid <span class="number">2px</span> black;
}
</code></pre>

<p>那如果我们现在需要在其他class中引入那些通用的属性集，那么我们只需要在任何class中像下面这样调用就可以了:</p>

<pre><code><span class="id">#menu</span> <span class="element">a</span> {
  <span class="attribute">color</span>: <span class="color">#111</span>;
  <span class="mixin">.bordered</span>;
}
<span class="class">.post</span> <span class="element">a</span> {
  <span class="attribute">color</span>: red;
  <span class="mixin">.bordered</span>;
}
</code></pre>

<p><code>.bordered</code> class里面的属性样式都会在 <code>#menu a</code> 和 <code>.post a</code>中体现出来:</p>

<pre><code><span class="id">#menu</span> <span class="element">a</span> {
  <span class="attribute">color</span>: <span class="color">#111</span>;
  <span class="attribute">border-top</span>: dotted <span class="number">1px</span> black;
  <span class="attribute">border-bottom</span>: solid <span class="number">2px</span> black;
}
<span class="class">.post</span> <span class="element">a</span> {
  <span class="attribute">color</span>: red;
  <span class="attribute">border-top</span>: dotted <span class="number">1px</span> black;
  <span class="attribute">border-bottom</span>: solid <span class="number">2px</span> black;
}
</code></pre>

<p>任何 CSS <em>class</em>, <em>id</em> 或者 <em>元素</em> 属性集都可以以同样的方式引入.</p>

<h2 id="-parametric-mixins">带参数混合</h2>

<p>在 LESS 中，你还可以像函数一样定义一个带参数的属性集合:</p>

<pre><code><span class="class">.border-radius</span> (<span class="variable">@radius</span>) {
  <span class="attribute">border-radius</span>: <span class="variable">@radius</span>;
  <span class="attribute">-moz-border-radius</span>: <span class="variable">@radius</span>;
  <span class="attribute">-webkit-border-radius</span>: <span class="variable">@radius</span>;
}
</code></pre>

<p>然后在其他class中像这样调用它:</p>

<pre><code><span class="id">#header</span> {
  <span class="mixin">.border-radius</span>(<span class="number">4px</span>);
}
<span class="class">.button</span> {
  <span class="mixin">.border-radius</span>(<span class="number">6px</span>);  
}
</code></pre>

<p>我们还可以像这样给参数设置默认值:</p>

<pre><code><span class="class">.border-radius</span> (<span class="variable">@radius</span>: <span class="number">5px</span>) {
  <span class="attribute">border-radius</span>: <span class="variable">@radius</span>;
  <span class="attribute">-moz-border-radius</span>: <span class="variable">@radius</span>;
  <span class="attribute">-webkit-border-radius</span>: <span class="variable">@radius</span>;
}
</code></pre>

<p>所以现在如果我们像这样调用它的话:</p>

<pre><code><span class="id">#header</span> {
  <span class="mixin">.border-radius</span>;  
}
</code></pre>

<p>radius的值就会是5px.</p>

<p>你也可以定义不带参数属性集合,如果你想隐藏这个属性集合，不让它暴露到CSS中去，但是你还想在其他的属性集合中引用，你会发现这个方法非常的好用:</p>

<pre><code><span class="class">.wrap</span> () {
  <span class="attribute">text-wrap</span>: wrap;
  <span class="attribute">white-space</span>: pre-wrap;
  <span class="attribute">white-space</span>: -moz-pre-wrap;
  <span class="attribute">word-wrap</span>: break-word;
}

<span class="element">pre</span> { <span class="mixin">.wrap</span> }
</code></pre>

<p>输出:</p>

<pre><code><span class="element">pre</span> {
  <span class="attribute">text-wrap</span>: wrap;
  <span class="attribute">white-space</span>: pre-wrap;
  <span class="attribute">white-space</span>: -moz-pre-wrap;
  <span class="attribute">word-wrap</span>: break-word;
}
</code></pre>

<h3><code><span class="variable">@arguments</span></code> 变量</h3>

<p><code><span class="variable">@arguments</span></code>包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:</p>

<pre><code><span class="class">.box-shadow</span> (<span class="variable">@x</span>: <span class="number">0</span>, <span class="variable">@y</span>: <span class="number">0</span>, <span class="variable">@blur</span>: <span class="number">1px</span>, <span class="variable">@color</span>: #<span class="number">000</span>) {
  <span class="attribute">box-shadow</span>: <span class="variable">@arguments</span>;
  <span class="attribute">-moz-box-shadow</span>: <span class="variable">@arguments</span>;
  <span class="attribute">-webkit-box-shadow</span>: <span class="variable">@arguments</span>;
}
<span class="mixin">.box-shadow</span>(<span class="number">2px</span>, <span class="number">5px</span>);
</code></pre>

<p>将会输出:</p>

<pre><code>  <span class="attribute">box-shadow</span>: <span class="number">2px</span> <span class="number">5px</span> <span class="number">1px</span> <span class="color">#000</span>;
  <span class="attribute">-moz-box-shadow</span>: <span class="number">2px</span> <span class="number">5px</span> <span class="number">1px</span> <span class="color">#000</span>;
  <span class="attribute">-webkit-box-shadow</span>: <span class="number">2px</span> <span class="number">5px</span> <span class="number">1px</span> <span class="color">#000</span>;
</code></pre>

<h2>模式匹配和导引表达式</h2>

<p>有些情况下，我们想根据传入的参数来改变混合的默认呈现，比如下面这个例子：</p>

<pre><code><span class="class">.mixin</span> (<span class="variable">@s</span>, <span class="variable">@color</span>) { ... }

<span class="class">.class</span> {
  <span class="mixin">.mixin</span>(<span class="variable">@switch</span>, <span class="color">#888</span>);
}
</code></pre>


<p>如果想让<code>.mixin</code>根据不同的<code><span class="variable">@switch</span></code>值而表现各异，如下这般设置：</p>

<pre><code><span class="class">.mixin</span> (dark, <span class="variable">@color</span>) {
  <span class="attribute">color</span>: darken(<span class="variable">@color</span>, <span class="number">10%</span>);
}
<span class="class">.mixin</span> (light, <span class="variable">@color</span>) {
  <span class="attribute">color</span>: lighten(<span class="variable">@color</span>, <span class="number">10%</span>);
}
<span class="class">.mixin</span> (<span class="variable">@_</span>, <span class="variable">@color</span>) {
  <span class="attribute">display</span>: block;
}
</code></pre>

<p>现在，如果运行:</p>

<pre><code><span class="variable">@switch</span>: light;

<span class="class">.class</span> {
  <span class="mixin">.mixin</span>(<span class="variable">@switch</span>, <span class="color">#888</span>);
}
</code></pre>

<p>就会得到下列CSS:</p>

<pre><code><span class="class">.class</span> {
  <span class="attribute">color</span>: <span class="color">#a2a2a2</span>;
  <span class="attribute">display</span>: block;
}
</code></pre>

<p>如上，<code>.mixin</code>就会得到传入颜色的浅色。如果<code><span class="variable">@switch</span></code>设为dark，就会得到深色。</p>

<p>具体实现如下：</p>

<ul>
<li>第一个混合定义并未被匹配，因为它只接受<code>dark</code>做为首参</li>
<li>第二个混合定义被成功匹配，因为它只接受<code>light</code></li>
<li>第三个混合定义被成功匹配，因为它接受任意值</li>
</ul>


<p>只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。</p>

<p>我们也可以匹配多个参数：</p>

<pre><code><span class="class">.mixin</span> (<span class="variable">@a</span>) {
  <span class="attribute">color</span>: <span class="variable">@a</span>;
}
<span class="class">.mixin</span> (<span class="variable">@a</span>, <span class="variable">@b</span>) {
  <span class="attribute">color</span>: fade(<span class="variable">@a</span>, <span class="variable">@b</span>);
}
</code></pre>

<p>Now if we call <code>.mixin</code> with a single argument, we will get the output of the first definition,
but if we call it with <em>two</em> arguments, we will get the second definition, namely <code><span class="variable">@a</span></code> faded to <code><span class="variable">@b</span></code>.</p>

<h3>引导</h3>

<p>当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。如果你对函数式编程非常熟悉，那么你很可能已经使用过导引。</p>

<p>为了尽可能地保留CSS的可声明性，LESS通过导引混合而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。</p>

<p>以此例做为开始：</p>

<pre><code><span class="class">.mixin</span> (<span class="variable">@a</span>) <span class="keyword">when</span> (lightness(<span class="variable">@a</span>) &gt;= <span class="number">50%</span>) {
  <span class="attribute">background-color</span>: black;
}
<span class="class">.mixin</span> (<span class="variable">@a</span>) <span class="keyword">when</span> (lightness(<span class="variable">@a</span>) &lt; <span class="number">50%</span>) {
  <span class="attribute">background-color</span>: white;
}
<span class="class">.mixin</span> (<span class="variable">@a</span>) {
  <span class="attribute">color</span>: <span class="variable">@a</span>;
}
</code></pre>

<p>when关键字用以定义一个导引序列(此例只有一个导引)。接下来我们运行下列代码：</p>

<pre><code><span class="class">.class1</span> { <span class="mixin">.mixin</span>(<span class="color">#ddd</span>) }
<span class="class">.class2</span> { <span class="mixin">.mixin</span>(<span class="color">#555</span>) }
</code></pre>

<p>就会得到：</p>

<pre><code><span class="class">.class1</span> {
  <span class="attribute">background-color</span>: black;
  <span class="attribute">color</span>: <span class="color">#ddd</span>;
}
<span class="class">.class2</span> {
  <span class="attribute">background-color</span>: white;
  <span class="attribute">color</span>: <span class="color">#555</span>;
}
</code></pre>

<p>导引中可用的全部比较运算有： <strong><code>&gt; &gt;= = =&lt; &lt;</code></strong>。此外，关键字<code>true</code>只表示布尔真值，下面两个混合是相同的：</p>

<pre><code><span class="class">.truth</span> (<span class="variable">@a</span>) <span class="keyword">when</span> (<span class="variable">@a</span>) { ... }
<span class="class">.truth</span> (<span class="variable">@a</span>) <span class="keyword">when</span> (<span class="variable">@a </span>= true) { ... }
</code></pre>

<p>除去关键字true以外的值都被视示布尔假：</p>

<pre><code><span class="class">.class</span> {
  <span class="mixin">.truth</span>(<span class="number">40</span>); <span class="comment">// Will not match any of the above definitions.</span>
}
</code></pre>

<p>导引序列使用逗号‘<code>,</code>’—分割，当且仅当所有条件都符合时，才会被视为匹配成功。</p>

<pre><code><span class="class">.mixin</span> (<span class="variable">@a</span>) <span class="keyword">when</span> (<span class="variable">@a </span>&gt; <span class="number">10</span>), (<span class="variable">@a </span>&lt; -<span class="number">10</span>) { ... }
</code></pre>

<p>导引可以无参数，也可以对参数进行比较运算：</p>

<pre><code><span class="variable">@media</span>: mobile;

<span class="class">.mixin</span> (<span class="variable">@a</span>) <span class="keyword">when</span> (<span class="variable">@media </span>= mobile) { ... }
<span class="class">.mixin</span> (<span class="variable">@a</span>) <span class="keyword">when</span> (<span class="variable">@media </span>= desktop) { ... }

<span class="class">.max</span> (<span class="variable">@a</span>, <span class="variable">@b</span>) <span class="keyword">when</span> (<span class="variable">@a </span>&gt; <span class="variable">@b</span>) { <span class="attribute">width</span>: <span class="variable">@a </span>}
<span class="class">.max</span> (<span class="variable">@a</span>, <span class="variable">@b</span>) <span class="keyword">when</span> (<span class="variable">@a </span>&lt; <span class="variable">@b</span>) { <span class="attribute">width</span>: <span class="variable">@b </span>}
</code></pre>

<p>最后，如果想基于值的类型进行匹配，我们就可以使用is*函式：</p>

<pre><code><span class="class">.mixin</span> (<span class="variable">@a</span>, <span class="variable">@b</span>: <span class="number">0</span>) <span class="keyword">when</span> (isnumber(<span class="variable">@b</span>)) { ... }
<span class="class">.mixin</span> (<span class="variable">@a</span>, <span class="variable">@b</span>: black) <span class="keyword">when</span> (iscolor(<span class="variable">@b</span>)) { ... }
</code></pre>

<p>下面就是常见的检测函式：</p>

<ul>
<li><code>iscolor</code></li>
<li><code>isnumber</code></li>
<li><code>isstring</code></li>
<li><code>iskeyword</code></li>
<li><code>isurl</code></li>
</ul>


<p>如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：</p>

<ul>
<li><code>ispixel</code></li>
<li><code>ispercentage</code></li>
<li><code>isem</code></li>
</ul>


<p>最后再补充一点，在导引序列中可以使用<strong><code>and</code></strong>关键字实现与条件：</p>

<pre><code><span class="class">.mixin</span> (<span class="variable">@a</span>) <span class="keyword">when</span> (isnumber(<span class="variable">@a</span>)) and (<span class="variable">@a </span>&gt; <span class="number">0</span>) { ... }
</code></pre>

<p>使用<strong><code>not</code></strong>关键字实现或条件</p>

<pre><code><span class="class">.mixin</span> (<span class="variable">@b</span>) <span class="keyword">when</span> not (<span class="variable">@b </span>&gt; <span class="number">0</span>) { ... }
</code></pre>



<h2 id="-nested-rules">嵌套规则</h2>

<p>LESS 可以让我们以<em>嵌套</em>的方式编写层叠样式.
让我们先看下下面这段 CSS:</p>

<pre><code><span class="id">#header</span> { <span class="attribute">color</span>: black; }
<span class="id">#header</span> <span class="class">.navigation</span> {
  <span class="attribute">font-size</span>: <span class="number">12px</span>;
}
<span class="id">#header</span> <span class="class">.logo</span> { 
  <span class="attribute">width</span>: <span class="number">300px</span>; 
}
<span class="id">#header</span> <span class="class">.logo</span><span class="class">:hover</span> {
  <span class="attribute">text-decoration</span>: none;
}
</code></pre>

<p>在 LESS 中, 我们就可以这样写:</p>

<pre><code><span class="id">#header</span> {
  <span class="attribute">color</span>: black;

  <span class="class">.navigation</span> {
    <span class="attribute">font-size</span>: <span class="number">12px</span>;
  }
  <span class="class">.logo</span> {
    <span class="attribute">width</span>: <span class="number">300px</span>;
    &amp;<span class="class">:hover</span> { <span class="attribute">text-decoration</span>: none }
  }
}
</code></pre>

<p>或者这样写:</p>

<pre><code><span class="id">#header</span>        { <span class="attribute">color</span>: black;
  <span class="class">.navigation</span>  { <span class="attribute">font-size</span>: <span class="number">12px</span> }
  <span class="class">.logo</span>        { <span class="attribute">width</span>: <span class="number">300px</span>;
    &amp;<span class="class">:hover</span>    { <span class="attribute">text-decoration</span>: none }
  }
}
</code></pre>

<p>代码更简洁了，而且感觉跟<code>DOM</code>结构格式有点像.</p>

<p>注意 <code>&amp;</code> 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到<code>&amp;</code>了. 这点对伪类尤其有用如 <code>:hover</code> 和 <code>:focus</code>.</p>

<p>例如:</p>

<pre><code><span class="class">.bordered</span> {
  &amp;<span class="class">.float</span> {
    <span class="attribute">float</span>: left; 
  }
  <span class="class">.top</span> {
    <span class="attribute">margin</span>: <span class="number">5px</span>; 
  }
}
</code></pre>

<p>会输出</p>

<pre><code><span class="class">.bordered</span><span class="class">.float</span> {
  <span class="attribute">float</span>: left;  
}
<span class="class">.bordered</span> <span class="class">.top</span> {
  <span class="attribute">margin</span>: <span class="number">5px</span>;
}
</code></pre>

<h2 id="-operations">运算</h2>

<p>任何数字、颜色或者变量都可以参与运算. 来看一组例子:</p>

<pre><code><span class="variable">@base</span>: <span class="number">5%</span>;
<span class="variable">@filler</span>: <span class="variable">@base </span>* <span class="number">2</span>;
<span class="variable">@other</span>: <span class="variable">@base </span>+ <span class="variable">@filler</span>;

<span class="attribute">color</span>: <span class="color">#888</span> / <span class="number">4</span>;
<span class="attribute">background-color</span>: <span class="variable">@base-color </span>+ <span class="color">#111</span>;
<span class="attribute">height</span>: <span class="number">100%</span> / <span class="number">2</span> + <span class="variable">@filler</span>;
</code></pre>

<p>LESS 的运算已经超出了我们的期望，它能够分辨出颜色和单位。如果像下面这样单位运算的话:</p>

<pre><code><span class="variable">@var</span>: <span class="number">1px</span> + <span class="number">5</span>;
</code></pre>

<p>LESS 会输出 <code><span class="number">6px</span></code>.</p>

<p>括号也同样允许使用:</p>

<pre><code><span class="attribute">width</span>: (<span class="variable">@var </span>+ <span class="number">5</span>) * <span class="number">2</span>;
</code></pre>

<p>并且可以在复合属性中进行运算:</p>

<pre><code><span class="attribute">border</span>: (<span class="variable">@width </span>* <span class="number">2</span>) solid black;
</code></pre>

<h2 id="-color-functions">Color 函数</h2>

<p>LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 <em>HSL</em> 色彩空间, 然后在通道级别操作:</p>

<pre><code>
lighten(<span class="variable">@color</span>, <span class="number">10%</span>);     <span class="comment">// return a color which is 10% *lighter* than @color</span>
darken(<span class="variable">@color</span>, <span class="number">10%</span>);      <span class="comment">// return a color which is 10% *darker* than @color</span>

saturate(<span class="variable">@color</span>, <span class="number">10%</span>);    <span class="comment">// return a color 10% *more* saturated than @color</span>
desaturate(<span class="variable">@color</span>, <span class="number">10%</span>);  <span class="comment">// return a color 10% *less* saturated than @color</span>

fadein(<span class="variable">@color</span>, <span class="number">10%</span>);      <span class="comment">// return a color 10% *less* transparent than @color</span>
fadeout(<span class="variable">@color</span>, <span class="number">10%</span>);     <span class="comment">// return a color 10% *more* transparent than @color</span>
fade(<span class="variable">@color</span>, <span class="number">50%</span>);        <span class="comment">// return @color with 50% transparency</span>

spin(<span class="variable">@color</span>, <span class="number">10</span>);         <span class="comment">// return a color with a 10 degree larger in hue than @color</span>
spin(<span class="variable">@color</span>, -<span class="number">10</span>);        <span class="comment">// return a color with a 10 degree smaller hue than @color</span>

mix(<span class="variable">@color1</span>, <span class="variable">@color2</span>);    <span class="comment">// return a mix of @color1 and @color2</span>
</code></pre>

<p>使用起来相当简单:</p>

<pre><code><span class="variable">@base</span>: <span class="color">#f04615</span>;

<span class="class">.class</span> {
  <span class="attribute">color</span>: saturate(<span class="variable">@base</span>, <span class="number">5%</span>);
  <span class="attribute">background-color</span>: lighten(spin(<span class="variable">@base</span>, <span class="number">8</span>), <span class="number">25%</span>);
}
</code></pre>

<p>你还可以提取颜色信息:</p>

<pre><code>hue(<span class="variable">@color</span>);        <span class="comment">// returns the `hue` channel of @color</span>
saturation(<span class="variable">@color</span>); <span class="comment">// returns the `saturation` channel of @color</span>
lightness(<span class="variable">@color</span>);  <span class="comment">// returns the 'lightness' channel of @color</span>
</code></pre>

<p>如果你想在一种颜色的通道上创建另一种颜色，这些函数就显得那么的好用，例如:</p>

<pre><code><span class="variable">@new</span>: hsl(hue(<span class="variable">@old</span>), <span class="number">45%</span>, <span class="number">90%</span>);
</code></pre>

<p><code><span class="variable">@new</span></code> 将会保持 <code><span class="variable">@old</span></code>的 <em>色调</em>, 但是具有不同的饱和度和亮度.</p>

<h2 id="-math-functions">Math 函数</h2>
<p>LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值:</p>
<pre><code>round(<span class="number">1.67</span>); <span class="comment">// returns `2`</span>
ceil(<span class="number">2.4</span>);   <span class="comment">// returns `3`</span>
floor(<span class="number">2.6</span>);  <span class="comment">// returns `2`</span>
</code></pre>
<p>如果你想将一个值转化为百分比，你可以使用<code>percentage</code> 函数:</p>
<pre><code>percentage(<span class="number">0.5</span>); <span class="comment">// returns `50%`</span>
</code></pre>

<h2 id="-namespaces">命名空间</h2>

<p>有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在<code>#bundle</code>中定义一些属性集之后可以重复使用:</p>

<pre><code><span class="id">#bundle</span> {
  <span class="class">.button</span> () {
    <span class="attribute">display</span>: block;
    <span class="attribute">border</span>: <span class="number">1px</span> solid black;
    <span class="attribute">background-color</span>: grey;
    &amp;<span class="class">:hover</span> { <span class="attribute">background-color</span>: white }
  }
  <span class="class">.tab</span> { ... }
  <span class="class">.citation</span> { ... }
}
</code></pre>

<p>你只需要在 <code>#header a</code>中像这样引入 <code>.button</code>:</p>

<pre><code><span class="id">#header</span> <span class="element">a</span> {
  <span class="attribute">color</span>: orange;
  <span class="mixin">#bundle</span> &gt; <span class="mixin">.button</span>;
}
</code></pre>

<h2 id="-scope">作用域</h2>

<p>LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.</p>

<pre><code><span class="variable">@var</span>: red;

<span class="id">#page</span> {
  <span class="variable">@var</span>: white;
  <span class="id">#header</span> {
    <span class="attribute">color</span>: <span class="variable">@var</span>; <span class="comment">// white</span>
  }
}

<span class="id">#footer</span> {
  <span class="attribute">color</span>: <span class="variable">@var</span>; <span class="comment">// red  </span>
}
</code></pre>

<h2 id="-comments">注释</h2>

<p>CSS 形式的注释在 LESS 中是依然保留的:</p>

<pre><code><span class="comment">/* Hello, I'm a CSS-style comment */</span>
<span class="class">.class</span> { <span class="attribute">color</span>: black }
</code></pre>

<p>LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:</p>

<pre><code><span class="comment">// Hi, I'm a silent comment, I won't show up in your CSS</span>
<span class="class">.class</span> { <span class="attribute">color</span>: white }
</code></pre>

<h2 id="-importing">Importing</h2>

<p>你可以在main文件中通过下面的形势引入 <code>.less</code> 文件,
 <code>.less</code> 后缀可带可不带:</p>

<pre><code><span class="variable">@import </span><span class="string">"lib.less"</span>;
<span class="variable">@import </span><span class="string">"lib"</span>;
</code></pre>

<p>如果你想导入一个CSS文件而且不想LESS对它进行处理，只需要使用<code>.css</code>后缀就可以:</p>

<pre><code><span class="variable">@import </span><span class="string">"lib.css"</span>;
</code></pre>

<p>这样LESS就会跳过它不去处理它.</p>

<h2>字符串插值</h2>

<p>变量可以用类似ruby和php的方式嵌入到字符串中，像<code>@{name}</code>这样的结构:</p>

<pre><code><span class="variable">@base-url</span>: <span class="string">"http://assets.fnord.com"</span>;
<span class="attribute">background-image</span>: url(<span class="string">"@{base-url}/images/bg.png"</span>);
</code></pre>

<h2>避免编译</h2>

<p>有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.</p>

<p>要输出这样的值我们可以在字符串前加上一个 <code>~</code>, 例如:</p>

<pre><code>
<span class="class">.class</span> {
  <span class="attribute">filter</span>: ~<span class="string">"ms:alwaysHasItsOwnSyntax.For.Stuff()"</span>;
}
</code></pre>

<p>我们可以将要避免编译的值用 “”包含起来，输出结果为:</p>

<pre><code>
<span class="class">.class</span> {
  <span class="attribute">filter</span>: <span class="attribute">ms</span>:alwaysHasItsOwnSyntax<span class="mixin">.For</span><span class="mixin">.Stuff</span>();
}
</code></pre>

<h2>JavaScript 表达式</h2>

<p>JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用:</p>

<pre><code><span class="variable">@var</span>: `<span class="string">"hello"</span><span class="mixin">.toUpperCase</span>() + <span class="string">'!'</span>`;
</code></pre>

<p>输出:</p>

<pre><code><span class="variable">@var</span>: <span class="string">"HELLO!"</span>;
</code></pre>

<p>注意你也可以同时使用字符串插值和避免编译:</p>

<pre><code><span class="variable">@str</span>: <span class="string">"hello"</span>;
<span class="variable">@var</span>: ~`<span class="string">"@{str}"</span><span class="mixin">.toUpperCase</span>() + <span class="string">'!'</span>`;
</code></pre>

<p>输出:</p>

<pre><code><span class="variable">@var</span>: HELLO!;
</code></pre>

<p>它也可以访问JavaScript环境:</p>

<pre><code><span class="variable">@height</span>: `document<span class="mixin">.body</span><span class="mixin">.clientHeight</span>`;
</code></pre>
<p>如果你想将一个JavaScript字符串解析成16进制的颜色值, 你可以使用 <code>color</code> 函数:</p>
<pre><code><span class="variable">@color</span>: color(`window<span class="mixin">.colors</span><span class="mixin">.baseColor</span>`);
<span class="variable">@darkcolor</span>: darken(<span class="variable">@color</span>, <span class="number">10%</span>);
</code></pre>
  </div>
</section>

<section id="translations" class="page">
  <div class="content">
    <h1>其他国家的LESS站点</h1>
    <ul>
        <li>English: <a href="http://lesscss.org/">http://lesscss.org</a>（需要翻墙）</li>
        <li>Russian: <a href="http://lesscss.ru/">http://lesscss.ru</a></li>
        <li>German:<a href="http://lesscss.de/">http://lesscss.de</a></li>
        <li>Japanese: <a href="http://less-ja.studiomohawk.com/">http://less-ja.studiomohawk.com/</a></li>
        <li>Belarus: <a href="http://www.designcontest.com/show/lesscss-be">http://www.designcontest.com/show/lesscss-be</a></li>
    </ul>
  </div>
</section>
<section id="about" class="page">
  <div class="content">
    <h1>About</h1>

<p><a href="http://cloudhead.io/">Alexis Sellier</a> -LESS作者</p>
<p><a href="http://www.lesscss.net/">LESS中国官网</a></p>
<p>说明：这个页面是为了给热爱Bootstrap的攻城师一个快速的查阅LessCss文档的途径。由于已经有<a href="http://www.lesscss.net/">LESS中国官网</a>的杰出翻译了，因此直接剽窃过来啦，哈哈。由衷的感谢他们的贡献！</p>

    <footer>
        <p>powered by <a href="http://github.com/cloudhead/less.js">LESS</a> and <a href="http://github.com/cloudhead/hiless">hiless</a></p>
    </footer>
  </div>
</section>

    </section>
    <a href="http://github.com/cloudhead/less.js">
      <img style="position: absolute; z-index: 5; top: 0; right: 0; border: 0;" src="docfiles/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
    </a>
    <script src="docfiles/hiless.js"></script>
    <script src="docfiles/h.js" type="text/javascript"></script>

  


</body></html>